<template>
  <el-dialog :title="title" :visible.sync="open" width="35%" :before-close="closeDelDialog">
    <div>
      <el-radio-group v-model="radio" v-if="axisType=='x'" @change="handleChange">
        <el-radio :label="1">年度</el-radio>
        <el-radio :label="2">部门</el-radio>
        <el-radio :label="3">门类</el-radio>
        <el-radio :label="4">人员</el-radio>
      </el-radio-group>
      <el-radio-group v-model="radio" v-if="axisType=='y'" @change="handleChange">
        <el-radio :label="5">保管期限</el-radio>
        <el-radio :label="6">密级</el-radio>
      </el-radio-group>
    </div>
    <div v-show="isShowHr">
      <hr>
      <!-- 年度 -->
      <div v-if="radio=='1'">
        <el-form ref="form" :rules="rules" :model="form" label-width="80px">
          <el-form-item label="开始年度" prop="year">
            <el-date-picker v-model="form.year" type="year" style="width: 40%" placeholder="请选择开始年度" value-format="yyyy" format="yyyy"></el-date-picker>
          </el-form-item>
          <el-form-item label="连续时间" prop="continuousTime">
            <el-input-number v-model="form.continuousTime" controls-position="right" style="width: 40%" :min="1" placeholder="请输入连续时间"></el-input-number>
          </el-form-item>
        </el-form>
      </div>
      <!-- 部门 -->
      <div v-if="radio=='2'">
        <el-tree ref="departmentTree" :data="departmentTree" show-checkbox node-key="id" :props="defaultProps" default-expand-all>
        </el-tree>
      </div>
      <!-- 门类 -->
      <div v-if="radio=='3'">
        <el-tree ref="categoryTree" :data="categoryTree" show-checkbox node-key="id" :props="defaultProps" default-expand-all>
        </el-tree>
      </div>
      <!-- 人员 -->
      <div v-if="radio=='4'">
        <el-tree ref="personnelTree" :data="personnelTree" show-checkbox node-key="id" :props="defaultProps" default-expand-all>
        </el-tree>
      </div>
      <!-- 保管期限 -->
      <div v-if="radio=='5'">
        <el-checkbox-group v-model="BGQX">
          <el-checkbox v-for="dict in dict.type.BGQX" :label="dict" :key="dict.value">{{ dict.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
      <!-- 密级 -->
      <div v-if="radio=='6'">
        <el-checkbox-group v-model="MJ">
          <el-checkbox v-for="dict in dict.type.MJ" :label="dict" :key="dict.value">{{ dict.label}}</el-checkbox>
        </el-checkbox-group>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit">提 交</el-button>
      <el-button @click="closeDelDialog">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {getCategoryTree} from "@/api/archive/statistics/customizeStatistics/customizeStatistics";
import {deptTreeSelect} from "@/api/system/user";
import {deptUserTree} from "@/api/archive/fileCollection/archiveApproval";

export default {
  name: "axisSelection",
  props: ["title", "open", "axisType"],
  archive_Dicts: ['BGQX', 'MJ'],
  data() {
    const equalToTime = (rule, value, callback) => {
      if (value) {
        var reg = /^[1-9]\d*$/
        if (reg.test(value) == false) {
          callback(new Error('请输入正整数'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    };
    return {
      // x轴
      radio: undefined,
      // 是否展示分割线
      isShowHr: false,
      // 展示类别
      showType: '',
      form: {
        year: undefined,
        continuousTime: undefined
      },
      // 门类树
      categoryTree: [],
      // 部门树
      departmentTree: [],
      // 人员树
      personnelTree: [],
      defaultProps: {
        children: "children",
        label: "label"
      },
      // 表单校验
      rules: {
        year: [
          { required: true, message: "请选择开始年度", trigger: "blur" }
        ],
        continuousTime: [
          { required: true, message: "请选择连续时间", trigger: "blur" },
          { required: true, validator: equalToTime, trigger: "blur" }
        ]
      },
      BGQX: [],
      MJ: [],
      // 选中的部门树节点
      departmentKeys: [],
      // 选中的门类树节点
      categoryKeys: [],
      // 选中的人员树节点
      roleKeys: [],

    }
  },
  created() {
    this.getCategory()
    this.getDeptTreePost()
    this.deptUserTreePost()
  },
  methods: {
    init(radio, data) {
      this.$set(this, 'radio', radio);
      this.isShowHr = true
      var arr = data.split(",").slice(1)
      if(radio == '1') {
        var date = arr[0]
        this.form.year = date.split('#')[0]
        this.form.continuousTime = date.split('#')[1]
      } else if(radio == '2') {
        this.departmentKeys = []
        var result = arr.map(function(item) {
          return item.split('#')[0];
        });
        this.departmentKeys = result
        this.$nextTick(() => {
          if (this.$refs.departmentTree) {
            this.$refs.departmentTree.setCheckedKeys(this.departmentKeys)
          }
        });
      } else if(radio == '3') {
        this.categoryKeys = []
        var result = arr.map(function(item) {
          return item.split('#')[0];
        });
        this.categoryKeys = result
        this.$nextTick(() => {
          if (this.$refs.categoryTree) {
            this.$refs.categoryTree.setCheckedKeys(this.categoryKeys)
          }
        });
      } else if(radio == '4') {
        this.roleKeys = []
        var result = arr.map(function(item) {
          return item.split('#')[0];
        });
        this.roleKeys = result
        this.$nextTick(() => {
          if (this.$refs.personnelTree) {
            this.$refs.personnelTree.setCheckedKeys(this.roleKeys)
          }
        });
      } else if(radio == '5') {
        var result = arr.map(function(item) {
          return item.split('#')[0];
        });
        var arr = []
        for (let i = 0; i < result.length; i++) {
          const data = this.dict.type.BGQX.filter(item => item.value == result[i])
          arr = arr.concat(data)
        }
        this.BGQX = arr
      } else if(radio == '6') {
        var result = arr.map(function(item) {
          return item.split('#')[0];
        });
        var arr = []
        for (let i = 0; i < result.length; i++) {
          const data = this.dict.type.MJ.filter(item => item.value == result[i])
          arr = arr.concat(data)
        }
        this.MJ = arr
      }
    },
    handleChange() {
      if(this.radio != undefined) {
        this.isShowHr = true
      } else {
        this.isShowHr = false
      }
    },
    // 获取门类树
    getCategory() {
      getCategoryTree().then(response => {
        const rootNode = { id: 'root', label: '门类', children: [] };
        const otherNodes = response.data.map(option => {
          return {
            id: option.id,
            label: option.name
          }
        })
        rootNode.children = otherNodes;
        this.categoryTree.push(rootNode)
      })
    },
    //部门树
    getDeptTreePost() {
      deptTreeSelect().then(response => {
        this.departmentTree = response.data;
      })
    },
    // 获取人员树接口
    deptUserTreePost(){
      deptUserTree().then(response => {
        this.personnelTree = response.data;
        // 重命名树结构中的字段
        this.personnelTree.forEach(node => {
          this.appendUser(node);
        });
      });
    },
    appendUser(node) {
      if (node.children && node.children.length > 0) {
        node.children.forEach(child => {
          this.appendUser(child);
        });
      }
      if (node.userChildren && node.userChildren.length > 0) {
        node.children = [...(node.children || []), ...node.userChildren];
        delete node.userChildren;
      }
    },
    // 提交
    submit() {
      if(this.radio == undefined) {
        this.$message({ message: '请选择轴字段', type: 'warning' })
        return;
      }else if(this.radio == '1') {
        this.$refs.form.validate((valid) => {
          if(valid) {
            var data = 'year,' + this.form.year + '#' + this.form.continuousTime
            this.$emit('getXdata', this.radio, data)
          }
        })
      } else if(this.radio == '2') {
        const tree = this.$refs.departmentTree;
        const checkedNodes = tree.getCheckedNodes();
        if(checkedNodes.length == 0){
          this.$message({ message: '请选择至少一个部门节点', type: 'warning' })
          return;
        }
        var arr = []
        for (let i = 0; i < checkedNodes.length; i++) {
          var dept = checkedNodes[i].id + '#' + checkedNodes[i].label
          arr.push(dept)
        }
        var data = 'dept,' + arr.toString()
        this.$emit('getXdata', this.radio, data)
      } else if(this.radio == '3') {
        const tree = this.$refs.categoryTree;
        const checkedNodes = tree.getCheckedNodes();
        if(checkedNodes.length == 0){
          this.$message({ message: '请选择至少一个门类节点', type: 'warning' })
          return;
        }
        var arr = []
        for (let i = 0; i < checkedNodes.length; i++) {
          var category = checkedNodes[i].id + '#' + checkedNodes[i].label
          arr.push(category)
        }
        // 判断'root#门类'是否在数组中
        if (arr.includes('root#门类')) {
          // 去掉包含'root#门类'的元素
          arr = arr.filter(item => !item.includes('root#门类'));
        }
        var data = 'category,' + arr.toString()
        this.$emit('getXdata', this.radio, data)
      } else if(this.radio == '4') {
        const tree = this.$refs.personnelTree;
        const checkedNodes = tree.getCheckedNodes();
        if(checkedNodes.length == 0){
          this.$message({ message: '请选择至少一个人员节点', type: 'warning' })
          return;
        }
        var arr = []
        for (let i = 0; i < checkedNodes.length; i++) {
          var role = checkedNodes[i].id + '#' + checkedNodes[i].label
          arr.push(role)
        }
        var data = 'role,' + arr.toString()
        this.$emit('getXdata', this.radio, data)
      } else if(this.radio == '5') {
        if(this.BGQX.length == 0) {
          this.$message({ message: '请选择至少一个保管期限', type: 'warning' })
          return;
        }
        var arr = []
        for (let i = 0; i < this.BGQX.length; i++) {
          var bgqx = this.BGQX[i].value + '#' + this.BGQX[i].label
          arr.push(bgqx)
        }
        var data = 'bgqx,' + arr.toString()
        this.$emit('getYdata', this.radio, data, this.BGQX)
      } else if(this.radio == '6') {
        if(this.MJ.length == 0) {
          this.$message({ message: '请选择至少一个密级', type: 'warning' })
          return;
        }
        var arr = []
        for (let i = 0; i < this.MJ.length; i++) {
          var mj = this.MJ[i].value + '#' + this.MJ[i].label
          arr.push(mj)
        }
        var data = 'mj,' + arr.toString()
        this.$emit('getYdata', this.radio, data, this.MJ)
      }
      this.radio = undefined
      this.isShowHr = false
      this.BGQX = []
      this.MJ = []
    },
    //关闭页面
    closeDelDialog() {
      this.$emit("cancel")
      this.radio = undefined
      this.isShowHr = false
      this.BGQX = []
      this.MJ = []
    },
  }
}
</script>

<style scoped>

</style>
